<template>
  <div class="cheng">
    <header>
      <span>&lt;</span>
      <p>发布房源</p>
      <span></span>
    </header>
    <main>
   <li>房源信息</li>
    <p>
      <span>小区名称</span>
      <input type="text" placeholder="请输入小区名称">
    </p>
    <p>
      <span>租&emsp;&emsp;金</span>
      <input type="text" placeholder="请输入租金/月">
      <span>￥/月</span>
    </p>
    <p>
      <span>建筑面积</span>
      <input type="text" placeholder="请输入建筑面积">
      <span>m2</span>
    </p>
    <div class="hu">
      <p>户&emsp;&emsp;型</p>
      <van-cell is-link @click="showPopup">请选择</van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />
    </div>
    <div class="hu">
      <p>所在楼层</p>
      <van-cell is-link @click="showPopup">请选择</van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />
    </div>
    <div class="chao">
      <div class="shang">
           <p>朝向&emsp;&emsp;</p>
      <van-cell is-link @click="showPopup">请选择</van-cell>
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" />
      </div>
      <div class="xia">
        <p>房屋标题</p>
      </div>
    </div>
    <div class="title">
      <p>
        <input type="text" placeholder="请输入标题(例如：整租小区名 2室 5000元)">
      </p>

    <p>房屋图像</p>
       </div>
       <div class="img">
         <van-uploader :after-read="afterRead" />
         <p>房屋配置</p>
       </div>
       <div class="house">
         <dl v-for="(v,i) in supporting" :key="i">
           <dt>
             <i class="icon iconfont icon-zanting3"></i>
           </dt>
           <dd>{{v.label}}</dd>
         </dl>
       </div>
    </main>
    <footer>
      <a href="javascript">取消</a>
      <a  class="second" href="javascript">提交</a>
    </footer>
  </div>
</template>

<script>
import axios from "../utils/request"
export default {
  data() {
    return {
      show: false,
      floor:[],
      room:[],
      oriented:[],
      supporting:[],
    };
  },
  created (){
    axios.get("/houses/params").then(res=>{
      console.log(res,'111');
      if(res.data.status===200){
        this.floor=res.data.body.floor;
        this.oriented=res.data.body.oriented;
        this.room=res.data.body.roomType;
        this.supporting=res.data.body.supporting;
      }
    })
  },

  methods: {
    showPopup() {
      this.show = true;
    },
     afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};
</script>

<style scoped lang="scss">
.cheng{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header{
    width: 100%;
    padding: 0 10px;
    align-items: center;
    display: flex;
    justify-content: space-between;

    height: 45px;
    background: #f6f5f6;
    span{
      font-size: 22px;
    }
    p{
      font-size: 16px;
    }
  }
  main{
    flex:1;
    overflow-y: scroll;
    li{
      width: 100%;
    
      padding: 0 10px;
     line-height: 45px;
      border-bottom: 1px solid #ccc;
  
      color: #21b97a;
    background-color: #fff;
    font-size: 15px;
    }
    p{
      height: 45px;
      align-items: center;
      display: flex;
      width: 100%;
      padding: 0 10px;
       background-color: #fff;
    font-size: 15px;
     border-bottom: 1px solid #ccc;
     justify-content: space-between;
     input{
       border:none;
     }
  
    }
  }
}
.hu{
  width: 100%;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  height: 45px;
  align-items: center;
   border-bottom: 1px solid #ccc;
  
}
.chao{
  .shang{
     width: 100%;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  height: 45px;
  align-items: center;
  p{
    border:none;
  }
   
  }
  .xia{
    width: 100%;
    padding: 0 10px;
  }

}
.title{
  width: 100%;
  padding: 0 10px;

 p:nth-of-type(1){
   line-height: 40px;
   border:none;
   input{
     width: 100%;
   }

 }


}
.img{
  width: 100%;
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
  .van-uploader{
    margin: 10px;
  }
  p{
    margin-top: 14px;
  }

}
footer{
  height: 45px;
  align-self: center;
  width: 100%;
  display: flex;
  align-items: center;
  a{
    width: 50%;
    text-align: center;
    line-height: 45px;
    background-color: #fff;
    color:#21b97a;
    font-size: 16px;
   
  }
  a.second{
    background: #21b97a;
    color:#fff;
  }
  
}
</style>